<template>
<!-- （账户明细） -->
<div class="w750" :class="themes.theme">
	<!-- 账户明细 -->
	<div class="account-det" :class="themes.theme">
		<div class="m-tabs">
			<div :class="index==action?'item line-on':'item'" v-for="(item,index) in tabTitle" :key="index" @click="tab(index)">
				<span class="txt">{{item}}</span>
			</div>
		</div>
		<template v-if="!Nomsg">
			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
				<div class="account-det-list" style="margin-top: 44px;">
					<div :class="item.amount>0 ? 'item cur' : 'item'" v-for="(item,index) in pdCashLogListData.resultList" :key="index" @click="transferId(index)">
						<div class="item-left">
							<p class="txt">{{item.logTypeText}}</p>
							<span class="time"> {{item.addTime | dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
						</div>
						<div class="item-right">
							<span class="price">{{item.amount>0 ? '+' : ''}}<em class="now">{{Money(item.amount)[0]}}</em>.{{Money(item.amount)[1]}}</span>
						</div>
					</div>
				</div>
			</van-list>
		</template>
		<div v-if="Nomsg" style="padding-top:9rem;">
				<Noempty :pic="require('../../assets/images/record-empty.png')" :title="'您没有相关记录'" />
		</div>
	</div>
	<!-- /账户明细 -->
</div>
</template>

<script>
import { List } from "vant";
import Noempty from 'components/Noempty/Noempty';
import cash from 'utils/tool';//引入处理分割金额的方法(变量)
import {mapState} from 'vuex'
import {pdCashLogList,} from 'api/preDeposit';
export default {
	components: {
		Noempty,
 	} ,
	data () {
		return {
       
			Nomsg: false,
			Money: cash,
			action:0,//点击tab时获取的索引
			tabTitle: ['全部','收入','支出'],//设置tab显示的内容
			logType:'',//用于给明细名称赋值
			pdCashLogListParams:{
				curPageNO:'1',
				state:null
			},
			pdCashLogListData:{},
			loading: false,//下拉加载时用
			finished: false,//下拉加载时用
		}
	},

	mounted () {
      let that = this

			this.pdCashMethods()
	},

	methods: {
		pdCashMethods(){//封装获取pdCashLogList接口的方法
			this.Nomsg=false,//如果不加这句，当某一个tab没内容且点击它后，点击另一个没内容的tab时，会不能显示数据
			pdCashLogList(this.pdCashLogListParams).then(res =>{
				this.pdCashLogListData=res.result
				if (res.status == 1) {
					this.pdCashLogListData=res.result
					if (res.result.resultList) {
						this.pdCashLogListData.resultList.forEach(element => {
						element['logTypeText'] = ''
							switch(element.logType){
								case 'order_freeze':element.logTypeText='下单支付被冻结';break;
								case 'auctions_freeze':element.logTypeText='冻结';break;
								case 'order_finally':element.logTypeText='下单';break;
								case 'recharge':element.logTypeText='充值';break;
								case 'withdraw':element.logTypeText='提现';break;
								case 'commission':element.logTypeText='佣金收入';break;
								case 'promoter':element.logTypeText='退还保证金';break;
								case 'refund':element.logTypeText='退款';break;
								case 'auctions_deduct':element.logTypeText='扣除保证金';break;
								default:this.logType='获取数据失败'}
						})
					} else {
						this.Nomsg = true
					}
				} else {
					this.$toast({duration: 1000,message:res.msg})
				}
			}),()=>{this.$toast('获取数据失败')}
		},
		tab(index) {//点击tab栏时的方法
			this.initialize()
			this.action = index
			if(this.action==0){//当v-if="action===0"时，显示‘全部’
				this.pdCashLogListParams.state=null
				this.pdCashMethods()
			}else if(this.action==1){//当v-if="action===0"时，显示‘收入’
				this.pdCashLogListParams.state=1
				this.pdCashMethods()
			}else if(this.action==2){//当v-if="action===2"时，显示‘支出’
				this.pdCashLogListParams.state=0
				this.pdCashMethods()
			}
		},
		transferId(index){
			this.$router.push({
				path:'/preDeposit/accountBill',
				query:{id:this.pdCashLogListData.resultList[index].id,}
			});
		},
		onLoad() {//vant-list下拉加载方法
			setTimeout(() => {
				if((this.pdCashLogListData.resultList.length!=null)){
					if (this.pdCashLogListData.resultList.length >= this.pdCashLogListData.total) {
						this.loading = false
						this.finished = true
					} else {
						this.pdCashLogListParams.curPageNO++
						pdCashLogList(this.pdCashLogListParams).then(res=> {
							for (let i = 0; i < res.result.resultList.length; i++) {
								this.pdCashLogListData.resultList.push(res.result.resultList[i])
								this.pdCashLogListData.resultList.forEach(element => {
									element['logTypeText'] = ''
									switch(element.logType){
										case 'order_freeze':element.logTypeText='下单支付被冻结';break;
										case 'auctions_freeze':element.logTypeText='冻结';break;
										case 'order_finally':element.logTypeText='下单';break;
										case 'recharge':element.logTypeText='充值';break;
										case 'withdraw':element.logTypeText='提现';break;
										case 'commission':element.logTypeText='佣金收入';break;
										case 'promoter':element.logTypeText='退还保证金';break;
										case 'refund':element.logTypeText='退款';break;
										case 'auctions_deduct':element.logTypeText='扣除保证金';break;
										default:this.logType='获取数据失败'}
								})
							}
							// 加载状态结束
							this.loading = false;
						})
					}
				}
				else{
					this.initialize()
				}
			}, 500);
		},
		initialize() {//初始化
			this.pdCashLogListParams.curPageNO = 1
			this.pdCashLogListParams.state = null
			this.pdCashLogListData = {}  //清除数组数据
			this.finished = false  //重置判断更多
			this.loading = false,
			this.pdCashLogListData.total = 0
		},
	},
	computed: {
		...mapState(['themes']),
	},
}
</script>

<style src="../../assets/css/pre-deposit.css" scoped></style>
<style src="../../assets/css/style/my-style.css" scoped></style>
<style scoped>
.m-tabs{/* 让Tab栏固定在顶部 */
    position: fixed;
    top: 44px;
    width: 100%;
    max-width: 750px;
	background: #fff;
	z-index: 1;
}
</style>
